<template>
	<view class="home-container">

		<!-- 滚动容器 -->
		<scroll-view class="scroll-container" scroll-y="true" @scroll="onScroll" :scroll-top="scrollTop" enhanced="true"
			show-scrollbar="false">
			<!-- 底部背景和内容区域 -->
			<view class="content-wrapper">
				<!-- 轮播图区域 -->
				<view class="banner-section">
					<swiper class="banner-swiper" :indicator-dots="true" :autoplay="true" :interval="3000"
						:duration="500" :circular="true" @change="onSwiperChange">
						<swiper-item v-for="(banner, index) in bannerList" :key="index">
							<image :src="banner.image" mode="aspectFill" class="banner-image"></image>
							<view class="banner-overlay">
								<!-- 标题区域 -->
								<view class="banner-title-section">
									<text class="banner-main-title">{{ banner.title }}</text>
									<text class="banner-sub-title">{{ banner.subtitle }}</text>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>

				<!-- 背景装饰 -->
				<view class="background-wrapper">
					<image src="https://i.ibb.co/DHSJKYzb/shouyebg.jpg" mode="aspectFill" class="background-image">
					</image>
				</view>

				<!-- 功能模块区域 -->
				<view class="modules-section">
					<view class="module-row">
						<view class="golden-btn ai-photo-btn" @click="goToAIPhoto">
							<view class="btn-bg-layer"></view>
							<view class="btn-content-wrapper">
								<view class="btn-text-content">
									<text class="btn-title">AI写真</text>
									<text class="btn-subtitle">无限妆造，在线拍大片</text>
								</view>
							</view>
							<view class="btn-shine"></view>
						</view>

						<view class="golden-btn travel-btn" @click="goToTravel">
							<view class="btn-bg-layer"></view>
							<view class="btn-content-wrapper">
								<view class="btn-text-content">
									<text class="btn-title">AI视频</text>
									<text class="btn-subtitle">无需远行，让你云游世界</text>
								</view>
							</view>
							<view class="btn-shine"></view>
						</view>
					</view>

				</view>

				<!-- 悬浮微信登录测试按钮（仅开发环境显示） -->
				<!-- <view v-if="showTestButton" class="floating-wechat-btn" :class="{ 'logging-in': isLoggingIn }"
					@click="simpleWechatLogin">
					<view v-if="!isLoggingIn" class="wechat-icon">📱</view>
					<view v-if="isLoggingIn" class="loading-spinner-small"></view>
				</view> -->

				<!-- 底部内容区域 -->
				<view class="bottom-section">
					<view class="section-title">
						<text class="title-text">我为“村BA"代言</text>
					</view>

					<!-- 合并图片展示区域 -->
					<view class="featured-banner">
						<view class="hot-tag-corner">HOT</view>
						<view class="banner-images">
							<image :src="featuredTemplate.images[0]" mode="aspectFill"
								class="featured-banner-image left"></image>
							<image :src="featuredTemplate.images[1]" mode="aspectFill"
								class="featured-banner-image right"></image>
						</view>
						<!-- 悬浮文本层 -->
						<view class="floating-text">
							<text class="banner-english-title">TRAVEL STYLE COLLECTION</text>
							<view class="enter-btn glass-effect" @click="goToFeaturedTemplate">
								<text class="enter-text">立即进入</text>
								<text class="enter-arrow">></text>
							</view>
						</view>
					</view>

					<!-- 热门模版列表 -->
					<view class="template-list">
						<view class="template-item" v-for="(template, index) in hotTemplates" :key="index">
							<view class="template-banner" @click="goToTemplate(template)">
								<view class="template-hot-tag" v-if="template.isHot">HOT</view>
								<view class="template-new-tag" v-if="template.isNew">NEW</view>
								<view class="template-images">
									<image :src="template.leftImage" mode="aspectFill" class="template-image left">
									</image>
									<image :src="template.rightImage" mode="aspectFill" class="template-image right">
									</image>
								</view>
								<!-- 悬浮文本层 -->
								<view class="template-floating-text">
									<text class="template-english-title">TRENDY STYLE</text>
									<view class="template-enter-btn glass-effect" @click.stop="goToTemplate(template)">
										<text class="template-enter-text">立即进入</text>
										<text class="template-arrow">></text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>


				<!-- 底部留白区域，避免被导航栏遮挡 -->
				<view class="bottom-spacer"></view>
			</view>
		</scroll-view>

		<!-- 椭圆形导航栏 -->
		<EllipseTabBar />

		<!-- 首页活动弹窗 -->
		<view class="home-modal-overlay" v-if="showHomeModal" @click="closeHomeModal">
			<view class="home-modal-content" @click.stop>
				<!-- 活动图片 -->
				<image src="https://cdn.xryai.cn/picGo/20250908175646412.png" mode="aspectFit"
					class="home-activity-image"></image>
				<!-- 关闭按钮 -->
				<view class="home-close-button" @click="closeHomeModal">
					<text class="home-close-text">关闭</text>
				</view>
				<!-- 参与活动按钮 -->
				<view class="home-share-buttons-group">
					<button class="home-share-button home-join-activity-button" @click="goToActivity">
						<text class="home-share-text">点击参与活动</text>
					</button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
import { isLoggedIn, saveLoginInfo } from '@/api/ai-trip/auth.js'
import { wxLogin } from '@/api/ai-trip/auth.js'
// 导入椭圆形导航栏组件
import EllipseTabBar from '@/components/ai-trip/EllipseTabBar.vue'

export default {
	components: {
		EllipseTabBar
	},
	data() {
		return {
			scrollTop: 0,
			statusBarHeight: 0,
			userBalance: 0,
			isNavigating: false, // 防重复点击标识
			showHomeModal: false, // 首页活动弹窗显示状态
			isLoggingIn: false, // 微信登录中状态
			// 轮播图数据 - 篮球主题
			bannerList: [
				{
					image: 'https://cdn.zhzfpn.cn/PicGo/20250905142013169.jpg',
					title: '篮球宝贝',
					subtitle: '展现运动魅力，定格青春瞬间'
				},
				{
					image: 'https://cdn.xryai.cn/picGo/20250906133051614.jpg',
					title: '女篮风姿',
					subtitle: '村BA代言人，AI写真大片即刻生成'
				}
			],
			// 顶部 Featured Banner 模板组 - 篮球宝贝
			featuredTemplate: {
				id: 10,
				title: '篮球宝贝',
				author: '驴小拍',
				image: 'https://cdn.zhzfpn.cn/PicGo/20250905142013169.jpg',
				status: 'available',
				category: 'travel',
				gender: 'female',
				peopleCount: 1,
				points: 10,
				images: [
					'https://cdn.zhzfpn.cn/PicGo/20250905142013169.jpg',
					'https://cdn.xryai.cn/picGo/20250906133051614.jpg'
				],
				templateImages: [
					{
						url: 'https://cdn.zhzfpn.cn/PicGo/20250905142013169.jpg',
						modelId: 'mt_1963850866333663232'
					}
				]
			},
			// 热门模板组列表 - 篮球主题素材
			hotTemplates: [
				{
					id: 10,
					title: '篮球宝贝',
					author: '驴小拍',
					image: 'https://cdn.zhzfpn.cn/PicGo/20250905142013169.jpg',
					leftImage: 'https://cdn.zhzfpn.cn/PicGo/20250905142013169.jpg',
					rightImage: 'https://cdn.zhzfpn.cn/PicGo/20250905142013169.jpg',
					status: 'available',
					category: 'travel',
					gender: 'female',
					peopleCount: 1,
					images: [
						'https://cdn.zhzfpn.cn/PicGo/20250905142013169.jpg'
					],
					templateImages: [
						{
							url: 'https://cdn.zhzfpn.cn/PicGo/20250905142013169.jpg',
							modelId: 'mt_1963850866333663232'
						}
					],
					points: 10,
					isHot: true,
					isNew: false
				},
				{
					id: 11,
					title: '筐贯长虹',
					author: '驴小拍',
					image: 'https://cdn.xryai.cn/picGo/20250906133051610.jpg',
					leftImage: 'https://cdn.xryai.cn/picGo/20250906133051610.jpg',
					rightImage: 'https://cdn.xryai.cn/picGo/20250906133051610.jpg',
					status: 'available',
					category: 'travel',
					gender: 'both',
					peopleCount: 1,
					images: [
						'https://cdn.xryai.cn/picGo/20250906133051610.jpg'
					],
					templateImages: [
						{
							url: 'https://cdn.xryai.cn/picGo/20250906133051610.jpg',
							modelId: 'mt_1964199303944159232'
						}
					],
					points: 10,
					isHot: true,
					isNew: false
				},
				{
					id: 12,
					title: '胯下运球',
					author: '驴小拍',
					image: 'https://cdn.xryai.cn/picGo/20250906133051613.jpg',
					leftImage: 'https://cdn.xryai.cn/picGo/20250906133051613.jpg',
					rightImage: 'https://cdn.xryai.cn/picGo/20250906133051613.jpg',
					status: 'available',
					category: 'travel',
					gender: 'female',
					peopleCount: 1,
					images: [
						'https://cdn.xryai.cn/picGo/20250906133051613.jpg'
					],
					templateImages: [
						{
							url: 'https://cdn.xryai.cn/picGo/20250906133051613.jpg',
							modelId: 'mt_1964199375662563328'
						}
					],
					points: 10,
					isHot: true,
					isNew: false
				},
				{
					id: 13,
					title: '逐光者',
					author: '驴小拍',
					image: 'https://cdn.xryai.cn/picGo/20250906133051611.jpg',
					leftImage: 'https://cdn.xryai.cn/picGo/20250906133051611.jpg',
					rightImage: 'https://cdn.xryai.cn/picGo/20250906133051611.jpg',
					status: 'available',
					category: 'travel',
					gender: 'female',
					peopleCount: 2,
					images: [
						'https://cdn.xryai.cn/picGo/20250906133051611.jpg'
					],
					templateImages: [
						{
							url: 'https://cdn.xryai.cn/picGo/20250906133051611.jpg',
							modelId: 'mt_1964199367148126208'
						}
					],
					points: 10,
					isHot: false,
					isNew: true
				},
				{
					id: 14,
					title: '女篮风姿',
					author: '驴小拍',
					image: 'https://cdn.xryai.cn/picGo/20250906133051614.jpg',
					leftImage: 'https://cdn.xryai.cn/picGo/20250906133051614.jpg',
					rightImage: 'https://cdn.xryai.cn/picGo/20250906133051614.jpg',
					status: 'available',
					category: 'travel',
					gender: 'female',
					peopleCount: 1,
					images: [
						'https://cdn.xryai.cn/picGo/20250906133051614.jpg'
					],
					templateImages: [
						{
							url: 'https://cdn.xryai.cn/picGo/20250906133051614.jpg',
							modelId: 'mt_1964199336345157632'
						}
					],
					points: 10,
					isHot: false,
					isNew: true
				}
			]
		}
	},
	
	computed: {
		// 计算导航栏样式变量
	},
	
	onLoad() {
		// 获取状态栏高度
		const systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight;
		
		// 判断是否显示测试按钮（仅开发环境显示）
		this.checkShowTestButton();
		
		// 设置状态栏样式
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: '#000000'
		});
		
		// 监听余额更新事件
		uni.$on('balanceUpdated', (newBalance) => {
			this.userBalance = newBalance;
		});
		
		// 获取用户余额
		this.getUserBalance();
		
		// 设置默认滚动位置
		this.setDefaultScrollPosition();
		
		// 页面加载时自动显示活动弹窗
		setTimeout(() => {
			this.showHomeModal = true;
			console.log('首页默认显示活动弹窗');
		}, 500);
	},

	onShow() {
		console.log('页面显示');
		// 检查是否有分享成功的标记
		const hasShared = uni.getStorageSync('hasShared');
		console.log('hasShared 标记:', hasShared);

		if (hasShared) {
			// 清除标记
			uni.removeStorageSync('hasShared');

			// 显示奖励弹窗
			setTimeout(() => {
				this.showRewardDialog = true;
				console.log('显示奖励弹窗');
			}, 1000);
		}
	},
	
	onUnload() {
		// 移除事件监听
		uni.$off('balanceUpdated');
	},
	methods: {
		
		// 跳转到我的界面
		goToMine() {
			// 防重复点击
			if (this.isNavigating) {
				console.log('我的界面：正在跳转中，请勿重复点击');
				return;
			}
			
			try {
				this.isNavigating = true;
				console.log('点击我的按钮，跳转到我的界面');
				
				uni.navigateTo({
					url: '/pages/ai-trip/mine/index',
					success: () => {
						console.log('我的界面跳转成功');
					},
					fail: (err) => {
						console.error('我的界面跳转失败:', err);
						uni.showToast({
							title: '页面跳转失败，请重试',
							icon: 'error',
							duration: 2000
						});
					},
					complete: () => {
						setTimeout(() => {
							this.isNavigating = false;
						}, 1000);
					}
				});
			} catch (error) {
				console.error('我的界面跳转过程出错:', error);
				this.isNavigating = false;
			}
		},
		
		onScroll(e) {
			const scrollTop = e.detail.scrollTop;
			// 可以在这里添加其他滚动相关的逻辑
		},

		// 轮播图切换事件
		onSwiperChange(e) {
			const current = e.detail.current;
		},
		
		goToAIPhoto() {
			// 防重复点击
			if (this.isNavigating) {
				console.log('AI创作：正在跳转中，请勿重复点击');
				return;
			}
			
			try {
				this.isNavigating = true;
				console.log('点击AI写真按钮，跳转到图片模板页面');
				
				uni.navigateTo({
					url: '/pages/ai-trip/aiphoto/ai_change/index',
					success: () => {
						console.log('AI写真跳转成功');
					},
					fail: (err) => {
						console.error('AI写真跳转失败:', err);
						uni.showToast({
							title: '页面跳转失败，请重试',
							icon: 'error',
							duration: 2000
						});
					},
					complete: () => {
						setTimeout(() => {
							this.isNavigating = false;
						}, 1000);
					}
				});
			} catch (error) {
				console.error('AI创作跳转过程出错:', error);
				this.isNavigating = false;
			}
		},
		goToActivity() {
			// 防重复点击
			if (this.isNavigating) {
				console.log('参与活动：正在跳转中，请勿重复点击');
				return;
			}
			
			try {
				this.isNavigating = true;
				console.log('点击参与活动按钮，跳转到AI创作页面');
				
				uni.navigateTo({
					url: '/pages/ai-trip/video_photo/index',
					success: () => {
						console.log('参与活动跳转成功');
					},
					fail: (err) => {
						console.error('参与活动跳转失败:', err);
						uni.showToast({
							title: '页面跳转失败，请重试',
							icon: 'error',
							duration: 2000
						});
					},
					complete: () => {
						setTimeout(() => {
							this.isNavigating = false;
						}, 1000);
					}
				});
			} catch (error) {
				console.error('参与活动跳转过程出错:', error);
				this.isNavigating = false;
			}
		},
		goToTravel() {
			// 防重复点击
			if (this.isNavigating) {
				console.log('穿越旅行：正在跳转中，请勿重复点击');
				return;
			}
			
			try {
				this.isNavigating = true;
				console.log('点击穿越旅行按钮，跳转到AI视频页面');
				
				uni.navigateTo({
					url: '/pages/ai-trip/ai_video/index',
					success: () => {
						console.log('穿越旅行跳转成功');
					},
					fail: (err) => {
						console.error('穿越旅行跳转失败:', err);
						uni.showToast({
							title: '页面跳转失败，请重试',
							icon: 'error',
							duration: 2000
						});
					},
					complete: () => {
						setTimeout(() => {
							this.isNavigating = false;
						}, 1000);
					}
				});
			} catch (error) {
				console.error('穿越旅行跳转过程出错:', error);
				this.isNavigating = false;
			}
		},
		goToAIStyle() {
			// 防重复点击
			if (this.isNavigating) {
				console.log('AI二次元：正在跳转中，请勿重复点击');
				return;
			}
			
			try {
				this.isNavigating = true;
				console.log('点击AI二次元按钮，跳转到二次元页面');
				
				uni.navigateTo({
					url: '/pages/ai-trip/erciyuan_photo/index',
					success: () => {
						console.log('AI二次元跳转成功');
					},
					fail: (err) => {
						console.error('AI二次元跳转失败:', err);
						uni.showToast({
							title: '页面跳转失败，请重试',
							icon: 'error',
							duration: 2000
						});
					},
					complete: () => {
						setTimeout(() => {
							this.isNavigating = false;
						}, 1000);
					}
				});
			} catch (error) {
				console.error('AI二次元跳转过程出错:', error);
				this.isNavigating = false;
			}
		},
		goToVlog() {
			// 防重复点击
			if (this.isNavigating) {
				console.log('AI合照：正在跳转中，请勿重复点击');
				return;
			}
			
			try {
				this.isNavigating = true;
				console.log('点击AI合照按钮，跳转到合照页面');
				
				// 跳转到AI合照页面
				uni.navigateTo({
					url: '/pages/ai-trip/group_photo/index',
					success: () => {
						console.log('AI合照跳转成功');
					},
					fail: (err) => {
						console.error('AI合照跳转失败:', err);
						uni.showToast({
							title: '页面跳转失败，请重试',
							icon: 'error',
							duration: 2000
						});
					},
					complete: () => {
						setTimeout(() => {
							this.isNavigating = false;
						}, 1000);
					}
				});
			} catch (error) {
				console.error('AI合照跳转过程出错:', error);
				this.isNavigating = false;
			}
		},
		
		// 跳转到顶部 Featured Banner 模板
		goToFeaturedTemplate() {
			console.log(' 点击顶部 Featured Banner 按钮');
			
			// 已移除登录检查，直接允许使用
			
			// 防重复点击
			if (this.isNavigating) {
				console.log('⚠️ 正在跳转中，防止重复点击');
				return;
			}
			
			// 验证模板数据
			if (!this.featuredTemplate || !this.featuredTemplate.id) {
				console.error('❌ Featured Banner 模板数据无效:', this.featuredTemplate);
				uni.showToast({
					title: '模板数据异常，请重试',
					icon: 'error',
					duration: 2000
				});
				return;
			}
			
			try {
				this.isNavigating = true;
				console.log('✅ 开始跳转到AI写真页面，模板数据:', this.featuredTemplate);
				
				// 保存模板组信息到缓存
				uni.setStorageSync('selectedTemplateGroup', this.featuredTemplate);
				console.log(' Featured Banner 模板组已保存到缓存');
				
				// 跳转到AI写真页面
				uni.navigateTo({
					url: '/pages/ai-trip/aiphoto/person_photo/index',
					success: () => {
						console.log('✅ Featured Banner 跳转成功');
					},
					fail: (err) => {
						console.error('❌ Featured Banner 跳转失败:', err);
						uni.showToast({
							title: '页面跳转失败，请重试',
							icon: 'error',
							duration: 2000
						});
					},
					complete: () => {
						// 重置导航状态
						setTimeout(() => {
							this.isNavigating = false;
							console.log(' 导航状态已重置');
						}, 500);
					}
				});
			} catch (error) {
				console.error('❌ Featured Banner 跳转过程出错:', error);
				this.isNavigating = false;
				uni.showToast({
					title: '操作失败，请重试',
					icon: 'error',
					duration: 2000
				});
			}
		},
		
		// 查看球队详情 - 模仿村BA页面的实现
		viewTeamDetail(team) {
			console.log('AI旅行页面 - 查看球队详情', team)
			
			// 防重复点击
			if (this.isNavigating) {
				console.log('⚠️ 正在跳转中，防止重复点击');
				return;
			}
			
			// 验证球队数据 - 更严格的检查
			if (!team || typeof team !== 'object') {
				console.warn('⚠️ 球队数据无效:', team, '使用默认数据')
				team = { id: 3, name: 'BSK' }
			}
			
			try {
				this.isNavigating = true;
				
				// 提取球队信息 - 兼容不同的数据结构，添加更多安全检查
				const teamId = (team && (team.teamId || team.id)) || 3
				const teamName = (team && (team.teamName || team.name)) || 'BSK'
				const eventId = 2 // 统一使用eventId=2
				
				// 构建跳转URL
				const url = `/pages/cunba/team_detail/index?teamId=${teamId}&teamName=${encodeURIComponent(teamName)}&eventId=${eventId}`
				console.log('AI旅行页面跳转到球队详情:', { teamId, teamName, eventId })
				
				// 执行跳转
				uni.navigateTo({
					url: url,
					success: () => {
						console.log('✅ 球队详情跳转成功');
					},
					fail: (err) => {
						console.error('❌ 球队详情跳转失败:', err);
						uni.showToast({
							title: '页面跳转失败，请重试',
							icon: 'error',
							duration: 2000
						});
					},
					complete: () => {
						// 重置导航状态
						setTimeout(() => {
							this.isNavigating = false;
							console.log('🔄 导航状态已重置');
						}, 500);
					}
				});
			} catch (error) {
				console.error('❌ 球队详情跳转过程出错:', error);
				this.isNavigating = false;
				uni.showToast({
					title: '操作失败，请重试',
					icon: 'error',
					duration: 2000
				});
			}
		},
		

		
		// 跳转到热门模板
		goToTemplate(template) {
			console.log(' 点击热门模板按钮，模板数据:', template);
			
			// 已移除登录检查，直接允许使用
			
			// 防重复点击
			if (this.isNavigating) {
				console.log('⚠️ 正在跳转中，防止重复点击');
				return;
			}
			
			// 验证模板数据
			if (!template || !template.id) {
				console.error('❌ 热门模板数据无效:', template);
				uni.showToast({
					title: '模板数据异常，请重试',
					icon: 'error',
					duration: 2000
				});
				return;
			}
			
			try {
				this.isNavigating = true;
				console.log('✅ 开始跳转到AI写真页面，模板ID:', template.id, '标题:', template.title);
				
				// 保存模板组信息到缓存
				uni.setStorageSync('selectedTemplateGroup', template);
				console.log(' 热门模板组已保存到缓存');
				
				// 跳转到AI写真页面
				uni.navigateTo({
					url: '/pages/ai-trip/aiphoto/person_photo/index',
					success: () => {
						console.log('✅ 热门模板跳转成功');
					},
					fail: (err) => {
						console.error('❌ 热门模板跳转失败:', err);
						uni.showToast({
							title: '页面跳转失败，请重试',
							icon: 'error',
							duration: 2000
						});
					},
					complete: () => {
						// 重置导航状态
						setTimeout(() => {
							this.isNavigating = false;
							console.log(' 导航状态已重置');
						}, 500);
					}
				});
			} catch (error) {
				console.error('❌ 热门模板跳转过程出错:', error);
				this.isNavigating = false;
				uni.showToast({
					title: '操作失败，请重试',
					icon: 'error',
					duration: 2000
				});
			}
		},
		
		// 跳转到我的照片页面
		goToMyPhoto() {
			// 防重复点击
			if (this.isNavigating) {
				console.log('我的照片：正在跳转中，请勿重复点击');
				return;
			}
			
			try {
				this.isNavigating = true;
				console.log('点击我的照片按钮，跳转到我的相册页面');
				
				uni.navigateTo({
					url: '/pages/ai-trip/my_photo/index',
					success: () => {
						console.log('我的相册跳转成功');
					},
					fail: (err) => {
						console.error('我的相册跳转失败:', err);
						uni.showToast({
							title: '页面跳转失败，请重试',
							icon: 'error',
							duration: 2000
						});
					},
					complete: () => {
						setTimeout(() => {
							this.isNavigating = false;
						}, 1000);
					}
				});
			} catch (error) {
				console.error('我的相册跳转过程出错:', error);
				this.isNavigating = false;
			}
		},
		
		getUserBalance() {
			// 模拟获取用户余额
			// 实际开发中这里应该调用API获取真实余额
			this.userBalance = uni.getStorageSync('userBalance') || 0;
		},
		
		// 设置默认滚动位置
		setDefaultScrollPosition() {
			// 不再需要特殊的滚动位置设置
			console.log(' 首页默认滚动位置设置完成');
		},
		
		// 首页活动弹窗相关方法
		closeHomeModal() {
			this.showHomeModal = false;
		},
		
		// 参与活动（原）
		// joinHomeActivity() {
		// 	console.log('首页点击参与活动');

		// 	// 关闭活动弹窗
		// 	this.closeHomeModal();

		// 	// 跳转到AI写真模板选择页面
		// 	uni.navigateTo({
		// 		url: '/pages/ai-trip/aiphoto/ai_change/index',
		// 		success: () => {
		// 			console.log('跳转到AI写真模板选择页面成功');
		// 		},
		// 		fail: (err) => {
		// 			console.error('跳转失败:', err);
		// 			uni.showToast({
		// 				title: '页面跳转失败，请重试',
		// 				icon: 'error',
		// 				duration: 2000
		// 			});
		// 		}
		// 	});
		// },

		//演示版
		joinHomeActivity() {
			console.log('按钮被点击了');
			this.closeHomeModal();
		},

		

	

		// 关闭弹窗
		closeShareDialog() {
			this.showShareDialog = false;
		},

		closeRewardDialog() {
			this.showRewardDialog = false;
		},
		
		// 检查是否显示测试按钮
		checkShowTestButton() {
			// 方法1: 通过系统信息判断平台
			const systemInfo = uni.getSystemInfoSync();
			console.log('系统信息:', systemInfo);
			
			// 方法2: 通过编译环境判断
			// #ifdef H5
			this.showTestButton = true; // H5开发环境显示
			console.log('H5环境，显示测试按钮');
			// #endif
			
			// #ifdef MP-WEIXIN
			// 小程序环境下，可以通过其他方式判断是否为开发版
			const accountInfo = uni.getAccountInfoSync();
			console.log('小程序账号信息:', accountInfo);
			
			// 如果是开发版或体验版，显示测试按钮
			if (accountInfo.miniProgram.envVersion === 'develop' || 
			    accountInfo.miniProgram.envVersion === 'trial') {
				this.showTestButton = true;
				console.log('小程序开发/体验环境，显示测试按钮');
			} else {
				this.showTestButton = false;
				console.log('小程序正式环境，隐藏测试按钮');
			}
			// #endif
			
			// #ifdef APP-PLUS
			// App环境下可以通过其他方式判断
			this.showTestButton = true; // App开发环境显示
			console.log('App环境，显示测试按钮');
			// #endif
		},
		
		// 简单微信登录
		async simpleWechatLogin() {
			console.log('点击微信登录按钮');
			
			// 防止重复点击
			if (this.isLoggingIn) {
				return;
			}
			
			this.isLoggingIn = true;
			
			try {
				// 获取微信登录code
				const code = await wxLogin();
				console.log('获取到微信code:', code);
				
				// 模拟登录成功（这里可以根据实际需求调用后端API）
				// 如果有后端接口，可以调用：
				// const result = await someWechatLoginAPI({ code });
				
				// 目前简单模拟登录成功
				const mockUserInfo = {
					token: 'mock_token_' + Date.now(),
					user_info: {
						nickname: '微信用户',
						openid: 'mock_openid_' + Date.now()
					}
				};
				
				// 保存登录信息
				saveLoginInfo(mockUserInfo);
				
				uni.showToast({
					title: '微信登录成功',
					icon: 'success',
					duration: 2000
				});
				
				console.log('微信登录成功:', mockUserInfo);
				
			} catch (error) {
				console.error('微信登录失败:', error);
				
				uni.showToast({
					title: '微信登录失败，请重试',
					icon: 'error',
					duration: 2000
				});
			} finally {
				// 延迟重置状态
				setTimeout(() => {
					this.isLoggingIn = false;
				}, 1500);
			}
		}
	}
}
</script>

<style scoped>
.home-container {
	width: 100%;
	height: 100vh;
	position: relative;
	background: linear-gradient(180deg, rgba(240, 248, 255, 0.8) 0%, rgba(230, 230, 250, 0.9) 100%);
}





.scroll-container {
	width: 100%;
	height: 100vh;
}

.content-wrapper {
	position: relative;
	background: linear-gradient(180deg, rgba(240, 248, 255, 0.9) 0%, rgba(230, 230, 250, 0.95) 100%);
	padding: 40rpx 40rpx 40rpx;
	min-height: 100vh;
	border-radius: 0;
	z-index: 3;
}

/* 轮播图样式 */
.banner-section {
	margin-bottom: 40rpx;
	margin-top: 20rpx;
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
	position: relative;
	z-index: 10;
	padding: 0;
	margin-left: 0;
	margin-right: 0;
}

.banner-swiper {
	height: 500rpx;
	width: 100%;
	position: relative;
	z-index: 15;
	touch-action: pan-x;
}

.banner-swiper swiper-item {
	width: 100%;
	height: 100%;
	display: block;
	overflow: hidden;
}

.banner-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border: none;
	outline: none;
}

.banner-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 40rpx;
}

.banner-title-section {
	text-align: center;
}

.banner-main-title {
	display: block;
	font-size: 48rpx;
	font-weight: 600;
	color: #fff;
	margin-bottom: 16rpx;
	text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
	letter-spacing: 2rpx;
}

.banner-sub-title {
	display: block;
	font-size: 26rpx;
	color: #fff;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(10rpx);
	padding: 10rpx 24rpx;
	border-radius: 20rpx;
	border: 1rpx solid rgba(255, 255, 255, 0.2);
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
}

.background-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.3;
	z-index: 1;
}

.background-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.modules-section {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	margin-top: 20rpx;
	margin-bottom: -30rpx;
}

.module-row {
	display: flex;
	gap: 24rpx;
	margin-bottom: 24rpx;
}

/* 黄金比例按钮设计 (1:1.618) */
.golden-btn {
	flex: 1;
	position: relative;
	width: 100%;
	height: 130rpx;
	border-radius: 20rpx;
	overflow: hidden;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	box-shadow: 
		0 8rpx 32rpx rgba(0, 0, 0, 0.12),
		0 2rpx 12rpx rgba(0, 0, 0, 0.08),
		inset 0 1rpx 0 rgba(255, 255, 255, 0.1);
	transform: translateZ(0);
	backdrop-filter: blur(20rpx);
	-webkit-backdrop-filter: blur(20rpx);
}

.golden-btn:active {
	transform: translateY(2rpx) scale(0.98);
	box-shadow: 
		0 8rpx 32rpx rgba(0, 0, 0, 0.2),
		0 2rpx 12rpx rgba(0, 0, 0, 0.15);
}

/* 背景渐变层 */
.btn-bg-layer {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}

/* AI写真 - 粉色系渐变 */
.ai-photo-btn .btn-bg-layer {
	background: linear-gradient(135deg, 
		#ff6b9d 0%, 
		#ff8fb3 30%, 
		#ffb3d1 70%, 
		#ffc0cb 100%);
}

/* 穿越旅行 - 橙色系渐变 */
.travel-btn .btn-bg-layer {
	background: linear-gradient(135deg, 
		#ff8a4c 0%, 
		#ffb366 30%, 
		#ffd699 70%, 
		#ffe4b5 100%);
}

/* AI造型 - 紫色系渐变 */
.style-btn .btn-bg-layer {
	background: linear-gradient(135deg, 
		#a78bfa 0%, 
		#c084fc 30%, 
		#d8b4fe 70%, 
		#e9d5ff 100%);
}

/* 智能VLOG - 蓝色系渐变 */
.vlog-btn .btn-bg-layer {
	background: linear-gradient(135deg, 
		#60a5fa 0%, 
		#7dd3fc 30%, 
		#a5f3fc 70%, 
		#bfdbfe 100%);
}

/* 图标容器 */
.btn-icon-wrapper {
	position: relative;
	z-index: 3;
	width: 50rpx;
	height: 50rpx;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10rpx);
	border-radius: 12rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1rpx solid rgba(255, 255, 255, 0.3);
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
	flex-shrink: 0;
}

/* 图标设计 */
.btn-icon {
	position: relative;
}

/* 相机图标 */
.camera-icon {
	width: 28rpx;
	height: 24rpx;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 4rpx;
	position: relative;
}

.camera-icon::before {
	content: '';
	position: absolute;
	top: -6rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 14rpx;
	height: 6rpx;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 3rpx 3rpx 0 0;
}

.camera-icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 12rpx;
	height: 12rpx;
	border: 2rpx solid rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	background: transparent;
}

/* 旅行图标 */
.travel-icon {
	width: 28rpx;
	height: 28rpx;
	background: rgba(255, 255, 255, 0.9);
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	position: relative;
}

.travel-icon::before {
	content: '';
	position: absolute;
	bottom: -8rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 20rpx;
	height: 3rpx;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 2rpx;
}

/* 造型图标 */
.style-icon {
	width: 24rpx;
	height: 24rpx;
	position: relative;
}

.style-icon::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 3rpx;
	height: 24rpx;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 2rpx;
}

.style-icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 24rpx;
	height: 3rpx;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 2rpx;
}

/* VLOG图标 */
.vlog-icon {
	width: 28rpx;
	height: 20rpx;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 4rpx;
	position: relative;
}

.vlog-icon::before {
	content: '';
	position: absolute;
	top: 50%;
	right: -8rpx;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6rpx 0 6rpx 8rpx;
	border-color: transparent transparent transparent rgba(255, 255, 255, 0.9);
}

/* 按钮内容包装器 */
.btn-content-wrapper {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6rpx 24rpx 26rpx 24rpx;
	height: 100%;
}

/* 文本内容区域 */
.btn-text-content {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.btn-title {
	font-size: 40rpx;
	font-weight: 700;
	color: #fff;
	margin-bottom: 4rpx;
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
	letter-spacing: 1rpx;
	line-height: 1.1;
}

.btn-subtitle {
	font-size: 22rpx;
	color: rgba(255, 255, 255, 0.9);
	font-weight: 400;
	line-height: 1.4;
	text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.2);
}

/* 光泽效果 */
.btn-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, 
		transparent 0%, 
			rgba(255, 255, 255, 0.2) 50%,
		transparent 100%);
	z-index: 4;
	transition: left 0.6s ease;
}

.golden-btn:active .btn-shine {
	left: 100%;
}

.bottom-section {
	padding: 40rpx 0;
}

.section-title {
	margin-bottom: 30rpx;
}

.title-text {
	font-size: 40rpx;
	font-weight: 700;
	color: #333;
	line-height: 1.2;
}

.hot-content {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.hot-tag {
	background: linear-gradient(135deg, #ff4444 0%, #ff6666 100%);
	color: white;
	font-size: 20rpx;
	font-weight: 700;
	padding: 8rpx 16rpx;
	border-radius: 8rpx;
	letter-spacing: 1rpx;
}

.hot-desc {
	font-size: 28rpx;
	color: #666;
}

/* 合并图片展示区域 */
.featured-banner {
	position: relative;
	margin: 30rpx 0;
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
}

.hot-tag-corner {
	position: absolute;
	top: 20rpx;
	left: 20rpx;
	background: linear-gradient(135deg, #ff4444 0%, #ff6666 100%);
	color: white;
	font-size: 20rpx;
	font-weight: 700;
	padding: 8rpx 16rpx;
	border-radius: 12rpx;
	z-index: 10;
	box-shadow: 0 4rpx 12rpx rgba(255, 68, 68, 0.3);
	letter-spacing: 1rpx;
}

.banner-images {
	display: flex;
	height: 200rpx;
	position: relative;
}

.featured-banner-image {
	width: 50%;
	height: 100%;
	object-fit: cover;
}

.featured-banner-image.left {
	border-radius: 20rpx 0 0 20rpx;
}

.featured-banner-image.right {
	border-radius: 0 20rpx 20rpx 0;
}

/* 悬浮文本层 */
.floating-text {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%);
	z-index: 5;
}

/* 英文标题样式 */
.banner-english-title {
	font-size: 36rpx;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.95);
	font-family: 'Montserrat', 'Arial', sans-serif;
	text-transform: uppercase;
	letter-spacing: 4rpx;
	margin-bottom: 30rpx;
	text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.4);
	text-align: center;
	width: 100%;
}

.banner-title {
	font-size: 48rpx;
	font-weight: 700;
	color: white;
	font-family: 'Georgia', serif;
	font-style: italic;
	margin-bottom: 20rpx;
	text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.5);
	letter-spacing: 2rpx;
}

/* 毛玻璃效果按钮 */
.glass-effect {
	background: rgba(255, 255, 255, 0.15) !important;
	backdrop-filter: blur(20rpx);
	-webkit-backdrop-filter: blur(20rpx);
	border: 1rpx solid rgba(255, 255, 255, 0.2);
	box-shadow: 
		0 8rpx 32rpx rgba(0, 0, 0, 0.1),
		inset 0 1rpx 0 rgba(255, 255, 255, 0.2);
}

.enter-btn {
	display: flex;
	align-items: center;
	background: linear-gradient(135deg, #ff6b9d 0%, #ff8a9b 100%);
	color: white;
	padding: 12rpx 24rpx;
	border-radius: 25rpx;
	font-size: 24rpx;
	font-weight: 500;
	box-shadow: 0 4rpx 16rpx rgba(255, 107, 157, 0.3);
	transition: all 0.3s ease;
	cursor: pointer;
	touch-action: manipulation;
	/* 优化触摸响应 */
}

.enter-btn:active {
	transform: scale(0.95);
}

.enter-text {
	margin-right: 8rpx;
}

.enter-arrow {
	font-size: 20rpx;
	font-weight: 600;
}

/* 热门模版列表 */
.template-list {
	margin-top: 40rpx;
}

.template-item {
	margin-bottom: 30rpx;
}

.template-banner {
	position: relative;
	height: 200rpx;
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
	transition: all 0.3s ease;
}

.template-banner:active {
	transform: translateY(2rpx) scale(0.98);
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
}

.template-hot-tag {
	position: absolute;
	top: 15rpx;
	left: 15rpx;
	background: linear-gradient(135deg, #ff4444 0%, #ff6666 100%);
	color: white;
	font-size: 18rpx;
	font-weight: 700;
	padding: 6rpx 12rpx;
	border-radius: 8rpx;
	z-index: 10;
	letter-spacing: 1rpx;
	box-shadow: 0 4rpx 12rpx rgba(255, 68, 68, 0.3);
}

.template-new-tag {
	position: absolute;
	top: 15rpx;
	left: 15rpx;
	background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
	color: white;
	font-size: 18rpx;
	font-weight: 700;
	padding: 6rpx 12rpx;
	border-radius: 8rpx;
	z-index: 10;
	letter-spacing: 1rpx;
	box-shadow: 0 4rpx 12rpx rgba(74, 222, 128, 0.3);
}

.template-images {
	display: flex;
	height: 100%;
	position: relative;
}

.template-image {
	width: 50%;
	height: 100%;
	object-fit: cover;
}

.template-image.left {
	border-radius: 20rpx 0 0 20rpx;
}

.template-image.right {
	border-radius: 0 20rpx 20rpx 0;
}

/* 模版悬浮文本层 */
.template-floating-text {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%);
	z-index: 5;
}

/* 模版英文标题样式 */
.template-english-title {
	font-size: 32rpx;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.95);
	font-family: 'Montserrat', 'Arial', sans-serif;
	text-transform: uppercase;
	letter-spacing: 3rpx;
	margin-bottom: 25rpx;
	text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.4);
	text-align: center;
	width: 100%;
}

.template-title {
	font-size: 42rpx;
	font-weight: 700;
	color: white;
	font-family: 'Georgia', serif;
	font-style: italic;
	margin-bottom: 20rpx;
	text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.5);
	letter-spacing: 2rpx;
}

.template-enter-btn {
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(20rpx);
	-webkit-backdrop-filter: blur(20rpx);
	color: white;
	padding: 12rpx 24rpx;
	border-radius: 25rpx;
	font-size: 24rpx;
	font-weight: 500;
	border: 1rpx solid rgba(255, 255, 255, 0.3);
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	cursor: pointer;
	touch-action: manipulation;
	/* 优化触摸响应 */
	z-index: 10;
	/* 确保按钮在最上层 */
}

.template-enter-btn:active {
	transform: scale(0.95);
	background: rgba(255, 255, 255, 0.3);
}

.template-enter-text {
	margin-right: 8rpx;
}

.template-arrow {
	font-size: 20rpx;
	font-weight: 600;
}

/* 底部留白区域，避免被导航栏遮挡 */
.bottom-spacer {
	height: 300rpx;
	/* 留白高度，确保最后一个模板按钮不被椭圆形导航栏遮挡 */
	width: 100%;
}

/* 首页活动弹窗样式 */
.home-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	backdrop-filter: blur(10rpx);
	-webkit-backdrop-filter: blur(10rpx);
	padding: 60rpx 40rpx;
}

.home-modal-content {
	width: 90%;
	max-width: 700rpx;
	height: calc(75vh + 400rpx);
	max-height: 90vh;
	position: relative;
	background: transparent;
	border-radius: 24rpx;
	overflow: hidden;
	box-shadow: 0 24rpx 60rpx rgba(0, 0, 0, 0.3);
	animation: homeModalSlideIn 0.3s ease-out;
	padding: 0;
	margin: 0;
}

@keyframes homeModalSlideIn {
	from {
		transform: scale(0.9);
		opacity: 0;
	}

	to {
		transform: scale(1);
		opacity: 1;
	}
}

.home-activity-image {
	width: 100%;
	height: 100%;
	display: block;
	background: transparent;
}

/* 关闭按钮样式 */
.home-close-button {
	position: absolute;
	bottom: 160rpx;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(20rpx);
	-webkit-backdrop-filter: blur(20rpx);
	color: white;
	padding: 16rpx 32rpx;
	border-radius: 40rpx;
	font-size: 24rpx;
	font-weight: 500;
	border: 1rpx solid rgba(255, 255, 255, 0.3);
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;
	cursor: pointer;
	z-index: 12;
	min-width: 120rpx;
	text-align: center;
}

.home-close-button:active {
	transform: translateX(-50%) scale(0.95);
	background: rgba(0, 0, 0, 0.7);
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.3);
}

.home-close-text {
	color: white;
	font-weight: 500;
}

.home-share-buttons-group {
	position: absolute;
	bottom: 40rpx;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
	z-index: 11;
	width: calc(100% - 40rpx);
}

.home-share-button {
	background: linear-gradient(135deg, #ff6b35 0%, #ff8f42 100%);
	color: white;
	padding: 24rpx 30rpx;
	border-radius: 50rpx;
	font-size: 28rpx;
	font-weight: 600;
	box-shadow: 0 12rpx 32rpx rgba(255, 107, 53, 0.4);
	transition: all 0.3s ease;
	cursor: pointer;
	backdrop-filter: blur(10rpx);
	-webkit-backdrop-filter: blur(10rpx);
	text-align: center;
	line-height: 1.4;
	width: 100%;
}

.home-share-button.home-join-activity-button {
	background: linear-gradient(135deg, #ff6b35 0%, #ff8f42 100%);
	box-shadow: 0 12rpx 32rpx rgba(255, 107, 53, 0.4);
	font-size: 28rpx;
	font-weight: 700;
}

.home-share-button:active {
	transform: scale(0.95);
	box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.6);
}

.home-share-text {
	color: white;
	font-weight: 600;
}

/* 悬浮微信登录测试按钮样式 */
.floating-wechat-btn {
	position: fixed;
	top: 200rpx;
	right: 30rpx;
	width: 100rpx;
	height: 100rpx;
	background: linear-gradient(135deg, #07c160 0%, #38d269 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.4);
	z-index: 999;
	transition: all 0.3s ease;
	cursor: pointer;
	touch-action: manipulation;
}

.floating-wechat-btn:active {
	transform: scale(0.95);
	box-shadow: 0 4rpx 16rpx rgba(7, 193, 96, 0.6);
}

.floating-wechat-btn.logging-in {
	opacity: 0.8;
	pointer-events: none;
}

.floating-wechat-btn .wechat-icon {
	font-size: 40rpx;
	margin: 0;
}

.loading-spinner-small {
	width: 36rpx;
	height: 36rpx;
	border: 4rpx solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	border-top-color: #ffffff;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* 移动端优化 */

/* 弹窗基础样式 */
.dialog-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 999;
}

.dialog-content {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	background-color: #fff;
	border-radius: 12px;
	padding: 30px 20px;
	z-index: 1000;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.dialog-title {
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 20px;
	color: #333;
}

.dialog-desc {
	font-size: 14px;
	color: #666;
	text-align: center;
	margin-bottom: 20px;
}

.dialog-buttons {
	display: flex;
	justify-content: space-around;
}


.cancel-btn {
	background-color: #f5f5f5;
	color: #666;
	border: 1px solid #ddd;
	padding: 10px 30px;
	border-radius: 30px;
	font-size: 14px;
}

/* 奖励弹窗样式 */
.reward-content {
	padding-bottom: 20px;
}

.qrcode-container {
	width: 200px;
	height: 200px;
	margin: 0 auto 20px;
	border: 1px solid #eee;
	padding: 10px;
	border-radius: 8px;
	background-color: #fff;
}

.qrcode-image {
	width: 100%;
	height: 100%;
}

.coupon-info {
	margin-bottom: 20px;
	padding: 0 10px;
}

.coupon-code,
.coupon-expire {
	font-size: 14px;
	color: #666;
	margin-bottom: 5px;
	text-align: center;
}

.coupon-desc {
	font-size: 12px;
	color: #999;
	text-align: center;
	margin-top: 10px;
}

.save-btn {
	background: linear-gradient(135deg, #4CAF50, #2E8B57);
	color: white;
	border: none;
	padding: 10px 30px;
	border-radius: 30px;
	font-size: 14px;
}

.close-btn {
	background-color: #f5f5f5;
	color: #666;
	border: 1px solid #ddd;
	padding: 10px 30px;
	border-radius: 30px;
	font-size: 14px;
}

/* 保存成功提示 */
.save-success {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(0, 0, 0, 0.7);
	color: white;
	padding: 15px 30px;
	border-radius: 30px;
	z-index: 1001;
}

.success-content {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.success-content .iconfont {
	font-size: 24px;
	margin-bottom: 5px;
}

.success-text {
	font-size: 14px;
}

.friend-list {
  margin-bottom: 20px;
  /* 限制高度，避免占用太多空间 */
  max-height: 200px; 
}

.friend-list-title {
  font-size: 14px;
  color: #333;
  margin-bottom: 10px;
}

.friend-scroll {
  height: 200px;
  border: 1px solid #eee;
  border-radius: 8px;
}

.friend-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.friend-item:active {
  background-color: #f5f5f5;
}

.friend-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.friend-name {
  font-size: 14px;
  color: #333;
}

/* 已选择好友样式 */
.selected-friend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 8px;
  margin-bottom: 20px;
}

.selected-friend-info {
  display: flex;
  align-items: center;
}

.selected-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.selected-name {
  font-size: 14px;
  color: #333;
}

.change-friend {
  font-size: 12px;
  color: #007aff;
}
</style>
